<template>
    <div>
        <swiper :options="swiperOption" ref="mySwiper" class="slider_wrap">
            <!-- slides -->
            <swiper-slide v-for="(item,index) in topImages" :key="index" class="slider_img">
                    <img :src="item">
            </swiper-slide>

            <!-- Optional controls -->
            <div class="swiper-pagination my_pagination"  slot="pagination"></div>
        </swiper>
        <div class="primary-info">
            <p class="title">{{title}}</p>
            <p><span  class="info-price">{{price}}</span><span></span></p>
            <p  class="info-other">
                <span>{{columns[0]}}</span>
                <span>{{columns[1]}}</span>
                <span>{{extra.deliveryTime}}小时发货</span>
                <span>{{extra.sendAddress}}</span></p>            
        </div>
        <div class="services">
             <div class="services_div">
                <div class="services_item">
                    <img :src="services.icon">
                    <span>{{services.name}}</span>
                </div>
                 <div class="services_item">
                    <img :src="services1.icon">
                    <span>{{services1.name}}</span>
                </div>
                <div  class="services_item">
                    <img :src="services2.icon">
                    <span>{{services2.name}}</span>
                </div> 
            </div>  
            <img src="https://s10.mogucdn.com/mlcdn/c45406/170711_701e7hcfi1j9fe76hgd560bj28d87_14x22.png">
        </div>
        <div class="bg"></div>
        <div class="shop">
            <div class="shop_title_wrap">
                <div class="shop_img_wrap">
                    <img :src="shopLogo">
                </div>
                <p>{{shopInfo_name}}</p>
                <span>+ 收藏</span>
            </div>
            <div class="info-content">
                <div class="count">
                    <div class="count_left">
                        <p>{{cSells}}</p>
                        <span>总销量</span>
                    </div>
                    <div class="count_right">
                        <p>{{cGoods}}</p>
                        <span>全部宝贝</span>
                    </div>        
                </div>
                <div class="shop-evaluate">
                     <ul>
                        <li>
                            <span>{{score.name}}</span>
                            <i>{{score.score}}</i>
                            <em>高</em>
                        </li>
                        <li>
                            <span>{{score1.name}}</span>
                            <i>{{score1.score}}</i>
                            <em>高</em>
                        </li>
                        <li>
                            <span>{{score2.name}}</span>
                            <i>{{score2.score}}</i>
                            <em>高</em>
                        </li>
                    </ul> 
                </div>
            </div>
            <div class="go_shop">
                <span>进店逛逛</span>
            </div>            
        </div>
        <div class="bg"></div>
        <div>
            <ul  class="nav_tab">
                <li><span>图文详情</span></li>
                <li><span>商品参数</span></li>
                <li><span>评价(0)</span></li>
                <li><span>热卖推荐</span></li>
            </ul>
        </div>
         <div class="img_list">
            <img :src="img" alt="" v-for="(img,index) in detailImage" :key="index">
        </div>
        <div class="footer_bottom"></div>
        <div class="footer">
            <div class="footerbar">
                <p></p>
                <span>客服</span>
            </div>
             <div class="footerbar">
                <p></p>
                <span>店铺</span>
            </div>
             <div class="footerbar">
                <p></p>
                <span>收藏</span>
            </div>
            <h2 @click="changeType">加入购物车</h2>
            <h3 @click="changeType">购买</h3>
        </div>
         <router-link to="/marketcar" tag="div" class="cart"><p v-if="num">{{num}}</p></router-link>
        <!-- <a href="###" class="top"></a>                  -->
        <div class="sale" v-if="isShow">
            <ul>
                <li>
                    <div class="message">
                        <div class="img">
                             <img :src="topImages[0]" alt="">
                        </div>
                        <div class="pp">
                            <p>{{title}}</p>
                            <p><span class="def">{{defaultPrice}}</span>&nbsp;库存<span>9956</span>件</p>
                        </div>
                    </div>
                     <span class="cancel" @click="close">X</span>
                </li>
                <li>
                    <p>颜色:</p>
                    <div class="style">
                        <p  v-for="x in styles" @click="m=x" :class="{act:m==x}">{{x}}</p>
                    </div>
                </li>
                <li>
                    <p>尺码:</p>
                    <div class="size">
                        <p  v-for="y in sizes" @click="n=y" :class="{act:n==y}">{{y}}</p>
                    </div>
                </li>
                <li>
                    <p>数量</p>
                    <div class="count">
                        <button @click="reduce">-</button>
                        <span>{{size}}</span>
                        <button @click="add">+</button>
                    </div>
                </li>
                <li>
                    <p class="makeSure" @click="toCar">确定</p>
                </li>
            </ul>
         </div>
    </div>
</template>
<script>
    import { swiper, swiperSlide } from 'vue-awesome-swiper'
    import {mapActions,mapGetters,mapState} from 'vuex'
    export default{
        name: 'carrousel',
        data(){
            return {
                commodity_list:[],
                topImages:[],
                title:"",
                price:"",
                columns:[],
                extra:{},
                services:[],
                services1:[],
                services2:[],
                score:[],
                score1:[],
                score2:[],
                shopLogo:"",
                shopInfo_name:"",
                cSells:"",
                cGoods:"",
                detailImage:[],
                swiperOption: {
                notNextTick: true,
                grabCursor : true,
                setWrapperSize :true,
                pagination : '.swiper-pagination',
                paginationType : 'custom',
                paginationCustomRender: function (swiper, current, total) {
                    return current + '/' + total;
                    }
                },
                skus:[],
                styles:[],
                sizes:[],
                defaultPrice:'',
                isShow:false,
                itemInfo:{},
                m:'',
                n:'',
                size:1
            }
        },
         mounted(){
            document.body.scrollTop = 0;
            this.$http.jsonp('http://m.meilishuo.com/jsonp/mls.h5_pintuan/v1',
                {params:{
                        itemId:this.$route.query.deviceId
                        }},
                {jsonp:'jsonp1'})
                .then(function(res){
                    return res.json();
                }).then(function(res){
                    this.commodity_list=res.data;
                    this.topImages=res.data.itemInfo.topImages;
                    this.title=res.data.itemInfo.title;
                    this.price=res.data.itemInfo.price;
                    this.columns=res.data.columns;
                    this.extra=res.data.itemInfo.extra;
                    this.services=res.data.shopInfo.services[0];
                    this.services1=res.data.shopInfo.services[1];
                    this.services2=res.data.shopInfo.services[2];
                    this.score=res.data.shopInfo.score[0];
                    this.score1=res.data.shopInfo.score[1];
                    this.score2=res.data.shopInfo.score[2];
                    this.shopLogo=res.data.shopInfo.shopLogo;
                    this.shopInfo_name=res.data.shopInfo.name;
                    this.cSells=res.data.shopInfo.cSells;
                    this.cGoods=res.data.shopInfo.cGoods;
                    this.detailImage=res.data.detailInfo.detailImage[0].list;
                    this.skus = res.data.skuInfo.skus;
                    for(var i=0;i<res.data.skuInfo.skus.length;i++){
                        if(this.styles.indexOf(res.data.skuInfo.skus[i].style)==-1){
                            this.styles.push(res.data.skuInfo.skus[i].style)
                        }
                    }
                    for(var i=0;i<res.data.skuInfo.skus.length;i++){
                        if(this.sizes.indexOf(res.data.skuInfo.skus[i].size)==-1){
                            this.sizes.push(res.data.skuInfo.skus[i].size)
                        }
                    }
                    this.defaultPrice = res.data.skuInfo.defaultPrice;
                    this.itemInfo  = res.data.itemInfo;
                    this.m = res.data.skuInfo.skus[0].style;
                    this.n = res.data.skuInfo.skus[0].size;
                })
        },
        components: {
            swiper,
            swiperSlide
        },
        methods:{
            changeType(){
                this.isShow = true
            },
            toCar(){
                let f = {};
                for(var key in this.itemInfo){
                    f[key] = this.itemInfo[key]
                }
                f.style = this.m;
                f.size = this.n;
                f.cartNum = this.size;
                this.$store.commit("toCar",f)
                this.isShow = false;
                this.size=1;
            },
            close(){
                this.isShow = false;
            },
            add(){
                this.size++;
            },
            reduce(){
                this.size--;
                if(this.size<1){
                    this.size=1;
                }
            }
        },
        computed:{
            num(){
                return this.$store.getters.num;
            }
        }
    }
</script>
<style scoped>
    .slider_wrap{
         height: 18.45rem;
         width: 100%;
         overflow: hidden;
         position: relative;
    }
    .my_pagination{
        position: absolute;
        bottom: 0.4rem;
        right: 0.8rem;
        height: 0.9rem;
        line-height: 0.9rem;
        width: 1.6rem;
        text-align: center;
        background: rgba(0, 0, 0, 0.3);
        border-radius: 0.45rem;
        color: #fff;
    }
    .slider_img{
        text-align: center;
        height: 18.45rem;
        display: inline-block;
        overflow: hidden;
    }
    .slider_img img{
        height: 100%;
    }
    .img_wrap{
        height: 18.45rem;
        padding-left: 0.4rem;
    }
    .img_wrap img{
        height: 100%;
    }
    .primary-info{
        padding: 0 0.4rem;
    }
    .title{
        font-size: 0.68rem;
        color: rgb(66, 66, 66);
        padding: 0.5rem 0;
    }
    .info-price{
        display: inline-block;
        color: rgb(255, 102, 153);
        font-size: 0.85rem;
        padding: 0.3rem 0;        
    }
    .info-other{
        display: flex;
        justify-content: space-between;
        font-size: 0.55rem;
        color: rgb(153, 153, 153);
        padding: 0.3rem 0;
        border-bottom: 1px solid rgb(238, 238, 238);                
    }
    .services{
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 2.5rem;
        padding: 0 0.3rem;        
    }
    .services img{
        height: 0.6rem;
    }
    .services_div{
        display: flex;
    }
    .services_item{
        display: flex;
        align-items: center;
        font-size: 0.6rem;
        color: rgb(102, 102, 102);
        margin-right: 0.6rem;
    }
    .services_item img{
        margin-right: 0.2rem;
    }
    .bg{
        height: 0.2rem;
        background: rgb(242, 245, 248);
    }
    .shop{
        padding: 1rem 0.4rem;
    }
    .shop_img_wrap{
        width: 2rem;
        height: 2rem;
        overflow: hidden;
        border-radius: 50%;
        border: 1px solid  rgb(200 , 200, 200);               
    }
    .shop_img_wrap img{
        width: 100%;
    }
    .shop_title_wrap{
        display: flex;
        align-items: center;
    }
    .shop_title_wrap span{
        height: 1rem;
        width: 3rem;
        background: rgb(255, 102, 153);
        color: #fff;
        font-size: 0.6rem;
        text-align: center;
        line-height: 1rem;
        border-radius: 0.5rem;
    }
    .shop_title_wrap p{
        flex-grow:1;
        color: rgb(94, 94, 94);
        font-size: 0.65rem;
        margin-left: 0.5rem;
    }
    .info-content{
        display: flex;
        padding: 0.5rem 0
    }
    .info-content .count{
        display: flex;
        width: 50%;
        text-align: center;
        border-right: 1px solid #f2f5f8;
        justify-content: space-around;
        
    }
    .info-content .count p{
        font-size: 0.65rem;
    }
    .info-content .count span{
        font-size: 0.5rem;
    }
    .count_left,.count_right{
        margin-right: 0.5rem;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
    }
    .shop-evaluate{
        width: 50%;
    }
    .shop-evaluate li{
        text-align: center;
        height: 0.8rem;
    }
    .shop-evaluate li span{
        font-size: 0.5rem;
        color: #666;
    }
    .shop-evaluate li i{
        display: inline-block;
        width: 2rem;
        font-size: 0.5rem;
        color: #f13e3a;   
        text-align: left;  
        padding-left: 0.5rem;
        
    }
    .shop-evaluate li em{
        background: #f13e3a;
        color: #fff;
    }
    .go_shop{
        text-align: center;
    }
    .go_shop span{
        display: inline-block;
        height: 1.3rem;
        line-height: 1.3rem;
        width: 6.5rem;
        font-size: 0.6rem;
        background: #f2f5f8;
        color: #666;
        border-radius: 0.65rem;
    }
    .nav_tab{
        display: flex;
    }
    .nav_tab li{
        width: 25%;
        color: #333;
        height: 2rem;
        display: flex;
        align-items: center;
    }
    .nav_tab li span{
        font-size:0.6rem;             
        width: 100%;
        text-align: center;
        border-right: 1px solid #ccc;
    }   
    .nav_tab li:last-child span{
        border: none;
    }
    .img_list{
        display: flex;
        flex-direction: column;
    }
    .img_list img{
        width: 100%;
    }
    .footer{
        width: 100%;
        height: 2.5rem;
        position: fixed;
        bottom: 0;
        background: #fff;
        display: flex;
    }
    .footerbar{
        width: 16.666%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
        padding: 0.15rem 0;
    }
    .footer div:nth-child(1) p{
        background: url(../../static/images/upload_ifqtoztggfqtsyjzhazdambqgyyde_44x300.png) no-repeat 0 40.5%;
        background-size: 100%
    }
    .footer div:nth-child(2) p{
        background: url(../../static/images/upload_ifqtoztggfqtsyjzhazdambqgyyde_44x300.png) no-repeat 0 76.5%;
        background-size: 100%
    }
    .footer div:nth-child(3) p{
        background: url(../../static/images/upload_ifqtoztggfqtsyjzhazdambqgyyde_44x300.png) no-repeat;
        background-size: 100%
    }
    .footerbar p{
        height: 1rem;
        width: 1rem;
    }
    .footerbar span{
        font-size: 0.55rem;
        color: rgb(153, 153, 153);
    }
    .footer h2{
        width: 25%;
        background: rgb(255, 232, 23);
        font-size: 0.7rem;
        height: 2.5rem;
        line-height: 2.5rem;
        text-align: center;
        font-weight: normal;
        color: #333;
    }
    .footer h3{
        width: 25%;
        background: rgb(255, 102, 153);
        font-size: 0.7rem;
        height: 2.5rem;
        line-height: 2.5rem;
        text-align: center;
        font-weight: normal;
        color: #fff;
    }
    .cart{
        height: 1.8rem;
        width: 1.8rem;
        background:url(../../static/images/upload_ie4tkodege4dkzrzhazdambqgqyde_80x180.png);
        background-size: 100%;      
        position: fixed;
        top: 75%;
        right:0.5rem;
        border-radius: 50%;
    }
    .cart p{
        width:1rem;
        height:1rem;
        line-height: 1rem;
        text-align: center;
        border-radius: 50%;
        background: red;
        position: absolute;
        right:0;
        top:0;
        color:#fff;
    }
    /* .top{
        height: 1.8rem;
        width: 1.8rem;
        background:url(../../static/images/upload_ie4tkodege4dkzrzhazdambqgqyde_80x180.png);
        background-size: 100%;      
        position: fixed;
        top: 80%;
        right:0.5rem;
        border-radius: 50%; 
    } */
    .sale{
        background:#fff;
        width:100vw;
        /*padding:0 .5rem;*/
        line-height: 1rem;
        position:fixed;
        bottom:0;
        z-index:80;
    }
    .sale ul li{
         position:relative;
         padding:.5rem;
         border-bottom: .05rem solid #eee;
    }
    .sale ul li>p:first-child{
        padding:.5rem;
    }
    .sale ul li:last-child{
        padding:0 0;
    }
    .message{
        width:100%;
        display: flex;
        flex-flow:wrap row;
        justify-content: flex-start;
        align-items: center;
    }
    .message .img{
        height:5rem;
        padding:.5rem 0;
        overflow-y:hidden;
    }
    .message .pp{
        /*width:100%;*/
        width:60vw;
        font-size:.6rem;
        display: flex;
        flex-flow:wrap row;
        justify-content: flex-start;
        align-items: center;
    }
    .message .pp p:last-child{
        color:#959595;
    }
    .message .pp p:last-child .def{
        color:#ff6699;
        font-size:1rem;
        line-height: 2rem;
    }
    .message img{
        width:4rem;
        margin-right:.5rem;
    }
    .cancel{
        color:#959595;
        position: absolute;
        right:.5rem;
        top:.5rem;
    }
    .style{
        width:100%;
        padding-bottom:.5rem;
        display: flex;
        flex-flow:wrap row;
        justify-content: flex-start;
        align-items: center;
        overflow-x: hidden;
    }
    .style p{
        color:#323232;
        width:20vw;
        padding:0 .5rem;
        margin-right:.5rem;
        border-radius:.1rem;
        text-align: center;
    }
    .style .act,.size .act{
        color:#fff;
        background: #ff6699;
    }
    .size{
        width:100%;
        padding-bottom:.5rem;
        display: flex;
        flex-flow:wrap row;
        justify-content: flex-start;
        align-items: center;
        overflow-x: hidden;
    }
    .size p{
        width:20vw;
        padding:0 .5rem;
        color:#323232;
        text-align: center;
        margin-right:.5rem;
        border-radius:.1rem;
    }
    .count button {
        width:1.2rem;
        height:1.2rem;  
        font-size:.7rem;
        border:none;
        background:#eee;
    }
    .count span{
        padding:.25rem .5rem;
        background:#eee;
    }
    .makeSure{
        width:100vw;
        padding:.5rem 0;
        background: #ff6699;
        color:#fff;
        text-align:center;
    }
    .footer_bottom{
        height: 2rem;
    }
</style>